<route lang="json5" type="page">
// @formatter:off
{
  style: {
    navigationBarTitleText: 'useRequestDemo',
    // navigationStyle: 'default', // custom default
  }
}
 // @formatter:on
</route>

<script setup lang="ts">
import { getUserListApi } from '@/api/testApi'
import useRequest from '@/hooks/useRequest'

// useRequest 的使用
const page = ref(1)
const { loading, error, data, run } = useRequest({
  queryKey: [page],
  queryFn: () => getUserListApi({ page: page.value, limit: 10 }),
  options: { immediate: true },
})
// data 数据处理
const filterData = computed(() => {
  return data.value?.map((item: any) => {
    return {
      ...item,
      title: `${item.title}（这是额外添加的内容~）`,
    }
  })
})

// 上一页
const prevPage = () => {
  page.value = Math.max(page.value - 1, 1)
}

// 下一页
const nextPage = () => {
  page.value = page.value + 1
}

// 重新获取列表数据
const getList = () => {
  run()
}
</script>

<template>
  <view class="m-16px flex flex-col items-stretch gap-2">
    <button class="w-full" @click="prevPage">上一页</button>
    <button class="w-full" @click="nextPage">下一页</button>
    <button class="w-full" @click="getList">重新获取列表</button>
    <view v-if="loading">加载中...</view>
    <view v-else>
      <view class="m-y-20rpx w-100vw font-size-36rpx">当前页码：{{ page }}</view>
      <view>
        <view v-for="item in filterData" :key="item.id" class="mb-10rpx">
          {{ item.title }}
        </view>
      </view>
    </view>
    <view v-if="error">请求失败: {{ error }}</view>
  </view>
</template>

<style scoped lang="scss">

</style>
